<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <meta name="keywords" content="your keywords">
    <meta name="description" content="your description">
    <meta name="author" content="author,email address">
    <meta name="format-detection" content="telephone=no"/>
    <title>测试输入补全</title>
    [@css src="h"/]
</head>
<body>
Hello
<h3>测试(首次从 URL 获取数据，显示 header，不显示按钮，忽略大小写)</h3>
<a class="btn btn-primary" data-toggle="modal" data-target="#modalTest">modal test</a></p>
<div class="row">
    <div class="col-lg-6">
        <div class="input-group">
            <input type="text" class="form-control" id="testNoBtn">
            <div class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                </ul>
            </div>
            <!-- /btn-group -->
        </div>
    </div>
</div>
<p>
    <br><code>ignorecase: true,</code> //忽略大小写
    <br><code>showHeader: true,</code> //显示 header
    <br><code>showBtn: false,</code> //不显示下拉按钮
    <br><code>delayUntilKeyup: true</code> //获取数据方式为 firstByUrl 时，延迟到有输入/获取到焦点时请求
</p>
<h3>测试(json 数据中获取)</h3>
<p>默认启用空关键字检索。</p>
<div class="row">
    <div class="col-lg-6">
        <div class="input-group">
            <input type="text" class="form-control" id="test_data">
            <div class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    测试
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                </ul>
            </div>
            <!-- /btn-group -->
        </div>
    </div>
</div>
[@js src="common,suggest"/]
<script>
    /**
     * 从 data参数中过滤数据
     */
    var dataList = {value: []}, i = 100;
    while(i--) {
        dataList.value.push({
            id: i,
           // word: Math.random() * 100000,
            description: 'http://lzw.me'
        });
    }
    $("#test_data").bsSuggest({
      //  indexId: 1,  //data.value 的第几个数据，作为input输入框的内容
       // indexKey: 1, //data.value 的第几个数据，作为input输入框的内容
        data: dataList
    }).on('onDataRequestSuccess', function (e, result) {
        //console.log('从 json.data 参数中获取，不会触发 onDataRequestSuccess 事件', result);
    }).on('onSetSelectValue', function (e, keyword, data) {

        //console.log('onSetSelectValue: ', keyword, data);
    }).on('onUnsetSelectValue', function () {
        //console.log("onUnsetSelectValue");
    });


    /**
     * 测试(首次从 URL 获取数据，显示 header，不显示按钮，忽略大小写)
     */
    $("#testNoBtn").bsSuggest({
        //url: "/rest/sys/getuserlist?keyword=",
        url: "data.json",
        effectiveFields: ["userName", "shortAccount"],
         searchFields: [ "userName","shortAccount"],
         effectiveFieldsAlias:{userName: "姓名"},
        ignorecase: true,
        number:true,
       // showHeader: true,
       // showBtn: false,     //不显示下拉按钮
        //delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
        idField: "userId",
        keyField: "userName"
    }).on('onDataRequestSuccess', function (e, result) {
        console.log('onDataRequestSuccess: ', result);
    }).on('onSetSelectValue', function (e, keyword, data) {
        console.log('onSetSelectValue: ', keyword, data);
    }).on('onUnsetSelectValue', function (e) {
        console.dir(e);
        console.log("onUnsetSelectValue");
    });
</script>
</body>
</html>